<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->
<script src="../../libs/js/graphical/raphael.js" type="text/javascript"></script>
<script src="../../libs/js/graphical/progress.js" type="text/javascript"></script>
<style>
	 #holder {
                position: relative;
                width: 350px;
                height: 180px;
                margin: 10px auto;
            }
    .rect_text1{
        position: absolute;
        top:35px;
        left: 30px;
    }
    .rect_text2{
        position: absolute;
        top:35px;
        left: 300px;
    }
    .rect_text3{
        position: absolute;
        top:85px;
        left: 30px;
    }

      .rect_text4{
        position: absolute;
        top:85px;
        left: 300px;
    }
    .rect_text5{
        position: absolute;
        top:135px;
        left: 30px;
    }
    .rect_text6{
        position: absolute;
        top:135px;
        left: 300px;
    }

     
</style>
</head>
<body>
<div class="page_content">
	<div id="holder">

            <div class="rect_text1">北京</div>
            <div class="rect_text2">70%</div>

            <div class="rect_text3">山东</div>
            <div class="rect_text4">55%</div>

            <div class="rect_text5">深圳</div>
            <div class="rect_text6">42%</div>

    </div>
</div>
<script>
	var rectWidth = 200;
          
    var paramBg = {stroke: "#ebf1f7", "stroke-width": 8};
    var paramBlue = {stroke: "#00aaef", "stroke-width": 8};
    var paramGreen = {stroke: "#1fc695", "stroke-width": 8};
    var paramYellow = {stroke: "#ff9900", "stroke-width": 8};
    $(function(){
       
       	var paper =initPaper("holder", 350, 180);   
        drawRectProgress(paper,70,0,100,80,50,rectWidth,paramBlue,paramBg);
        drawRectProgress(paper,55,0,100,80,100,rectWidth,paramGreen,paramBg);
        drawRectProgress(paper,42,0,100,80,150,rectWidth,paramYellow,paramBg);



    })
</script>
</body>
</html>